<%--
  Created by IntelliJ IDEA.
  User: veneno
  Date: 2020/11/20
  Time: 19:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/default.css">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <title>显示页面</title>
    <style>
        .swal-overlay {
            background-color: rgba(43, 165, 137, 0.45);
        }
    </style>
</head>

<body>

<%--头部开始--%>
<header>
    <div class="headerwrapper">
        <!--左边蓝色图标页面开始-->
        <div class="header-left">
            <a href="#" class="logo">
                <img src="../images/logo.png" alt="" />
            </a>
            <div class="pull-right">
                <a href="#" class="menu-collapse">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <!--左边蓝色图标页面结束-->


        <!--导航栏图标和头像显示结束-->
        <div class="header-right">

            <div class="pull-right">


                <!--头像，退出登录-->
                <div class="btn-group btn-group-option">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <img class="img-circle avatar-img" alt="" src="../images/profile1.png">
                        <span class="user-name">${loginUser.username}</span>
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#updateinfo" data-toggle="modal"><i class="glyphicon glyphicon-user"></i>个人信息</a></li>
                        <li><a href="#updatePass" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i>密码修改</a></li>
                        <li class="divider"></li>
                        <li><a href="../loginOut"><i class="glyphicon glyphicon-log-out"></i>注销</a></li>
                    </ul>
                </div>

            </div>

        </div>
        <!--导航栏图标和头像显示结束-->
    </div>
</header>



<section>
    <div class="mainwrapper">

        <!--左边垂直导航栏开始-->
        <div class="leftpanel">

            <!--垂直头像信息栏开始-->
            <div class="media profile-left">
                <a class="pull-left profile-thumb" href="#updateinfo" data-toggle="modal">
                    <img class="img-circle" src="../images/profile1.png" alt="">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">${loginUser.username}</h4>
                    <span class="user-options"><a href="#updateinfo" data-toggle="modal"><i class="glyphicon glyphicon-user"></i></a>
                              <a href="#updatePass" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a>
                              <a href="http://localhost:8080/1_war_exploded/loginOut"><i class="glyphicon glyphicon-log-out"></i></a>
							</span>
                </div>
            </div>
            <!--垂直头像信息栏结束-->



            <ul class="nav nav-pills nav-stacked">
                <li class="parent active"><a href="#"><i class="fa fa-home"></i> <span>图书信息查询</span></a>
                    <ul class="children">
                        <li><a href="readerMain.jsp">图书查询</a></li>
                        <li class="active"><a href="borrowBooksMsg.jsp">借阅信息</a></li>
                    </ul>
                </li>

            </ul>

        </div>
        <!--左边垂直导航栏结束-->


        <!--页面主体部分开始-->
        <div class="mainpanel">
            <div class="contentpanel" style="height: 100%">
                <!--面板开始-->
                <div class="panel panel-default">

                    <!--面板标题开始-->
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="#" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">查询</h4>
                        <p>借阅信息查询</p>
                    </div>
                    <!--面板标题结束-->

                    <!--面板主体开始-->
                    <div class="panel-body"></div>
                    <!--面板主体结束-->

                    <!--图书数据展示-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-12">
                                <table class="table table-hover table-bordered" id="table"></table>
                            </div>
                        </div>
                    </div>
                    <!--图书数据展示结束-->

                </div>
                <!--面板结束-->

            </div><!-- contentpanel -->

        </div>
        <!--页面主体部分结束-->

    </div><!-- mainwrapper -->
</section>


<%--模态框开始--%>
<%--个人信息模态框--%>
<form class="form-horizontal" action="" id="model_form1"><!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="updateinfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 1048">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel">个人信息</h4>
                </div>

                <div class="modal-body">

                    <input type="hidden" name="id" value="${loginUser.id}">
                    <input type="hidden" name="password" value="${loginUser.password}">
                    <input type="hidden" name="idCard" value="${loginUser.idCard}">
                    <input type="hidden" name="status" value="${loginUser.status}">




                    <!--正文-->
                    <div class="form-group">
                        <label for="cardID" class="col-sm-3 control-label">Card编号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="cardID" name="cardID" readonly value="${loginUser.idCard}">
                            <label class="control-label" for="cardID" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">用户名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="name" name="username" readonly value="${loginUser.username}">
                            <label class="control-label" for="name" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">联系号码</label>
                        <div class="col-sm-7">
                            <input type="text" minlength="11" maxlength="11" class="form-control" onblur="checkPhone();" id="phone" name="phone"  placeholder="请输入您的联系号码" value="${loginUser.phone}">
                            <label class="control-label" for="phone" id="phoneErro" style="display: none"></label>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="email" class="col-sm-3 control-label">邮箱</label>
                        <div class="col-sm-7">
                            <input type="email" class="form-control" id="email" name="email"  placeholder="请输入您的邮箱" value="${loginUser.email}">
                            <label class="control-label" for="email" style="display: none"></label>
                        </div>
                    </div>

                    <!--正文-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updateInfo()">修改</button>
                </div>
            </div>
        </div>
    </div>
</form>
<%--个人信息模态框结束--%>

<%--密码模态框--%>
<form class="form-horizontal" id="model_form2"><!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="updatePass" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 1048">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel1">修改密码</h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" name="id" value="${loginUser.id}">
                    <input type="hidden" name="idCard" value="${loginUser.idCard}">
                    <input type="hidden" name="username" value="${loginUser.username}">
                    <input type="hidden" name="phone" value="${loginUser.phone}">
                    <input type="hidden" name="email" value="${loginUser.email}">


                    <!--正文-->
                    <div class="form-group">
                        <label for="oldPass" class="col-sm-3 control-label">原密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="oldPass" name="password"  placeholder="请输入您的原密码">
                            <label class="control-label" for="oldPass" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="newPass" class="col-sm-3 control-label">新密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="newPass" name="newPass"  placeholder="请输入您的新密码">
                            <label class="control-label" for="newPass" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="newPass1" class="col-sm-3 control-label">确认密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="newPass1" name="newPass1"  placeholder="请输入您的新密码">
                            <label class="control-label" for="newPass1" style="display: none"></label>
                        </div>
                    </div>
                    <!--正文-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updatePass()">修改</button>
                </div>
            </div>
        </div>
    </div>
</form>
<%--密码模态框结束--%>


<script>
    $("#table").bootstrapTable({
        url:"http://localhost:8080/1_war_exploded/getBorrowBooks?id="+${loginUser.id},
        method:"get",
        sidePagination: "client",
        cache:false,
        striped:true,
        pagination:true,
        sortable:true,
        sortOrder:"asc",
        search:true,
        showRefresh: true,
        clickToSelect:true,
        showToggle: true,
        columns:[
            { field: 'SerialNumber', title: '序号',
                formatter: function (value, row, index) {
                    return index+1;
                }
            },
            { field: 'isbn', title: 'ISBN' },
            { field: 'bookName', title: '书名' },
            { field: 'author', title: '作者' },
            { field: 'type', title: '类型' },
            { field: 'press', title: '出版社' },
            { field: 'idCard', title: '读者卡号' },
            { field: 'username', title: '读者名称' },
            { field: 'borrowTime', title: '借书时间' },
        ]
    })
</script>

<script>
    <%--模态框方法--%>
    /*修改用户信息的事件*/
    function updateInfo(){
        if ($("#phoneErro").text()!==""){
            swal("号码格式不对哦！",{icon: "error",timer:1500})
            return ;
        }
        $.ajax({
            url:"http://localhost:8080/1_war_exploded/updateInfo",
            type: "post",
            dataType: "json",
            data:$("#model_form1").serialize(),
            success:function (result){
                if (result.msg==="ok"){
                    console.log(result.msg)
                    swal("修改成功！",{icon: "success",timer:1500})
                    $("#updateinfo").modal('hide')
                    $('#model_form1')[0].reset(); //重置表单
                }
            },
            error:function (){
                swal("修改失败！",{icon: "error",timer:1500})
            }
        })
    }
    //修改密码
    function updatePass(){
        var oldPass=$("#oldPass").val()
        var newPass=$("#newPass").val()
        var newPass1=$("#newPass1").val()
        if(oldPass===""||newPass===""||newPass1===""){
            swal("输入密码不为空！",{icon:"error",timer:1800})
            return false;
        } else if (newPass!==newPass1){
            swal("两次密码不匹配！",{icon:"error",timer:1800})
            return false;
        }else {
            $.ajax({
                url:"http://localhost:8080/1_war_exploded/updateUserPass",
                type: "post",
                dataType: "json",
                data:$("#model_form2").serialize(),
                success:function (result){
                    if (result.msg==="ok"){
                        $("#oldPass").val("")
                        $("#newPass").val("")
                        $("#newPass1").val("")
                        swal("修改成功！",{icon: "success",timer:1500})
                        $("#updatePass").modal('hide')
                    }
                    if (result.msg==="PassError"){
                        $("#oldPass").val("")
                        $("#newPass").val("")
                        $("#newPass1").val("")
                        swal("原密码错误，修改失败！",{icon: "error",timer:1500})
                    }
                },
                error:function (){
                    $("#oldPass").val("")
                    $("#newPass").val("")
                    $("#newPass1").val("")
                    swal("修改失败！",{icon: "error",timer:1500})
                }
            })
            return true;
        }

    }

    //检验数据格式
    function checkPhone() {
        var phoneMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/
        var phone=$("#phone").val()
        if(!phoneReg.test(phone)){
            $("#phoneErro").text("手机号码格式有误！")
            $("#phoneErro").css(phoneMsg)
            $("#phone")[0].focus()
        }else {
            $("#phoneErro").text("")
        }
    }
</script>


<script src="../js/sweetalert.min.js"></script>
<script src="../js/custom.js"></script>
</body>
</html>

